<template>
  <lay-layer
    type="drawer"
    v-model="visible"
    title="查看状态"
    class="layer_center"
  >
    <div class="from_box">
      <lay-step
        :active="active"
        direction="vertical"
          composition="row"
      >
        <lay-step-item
          v-for="(item, idnex) in dataList"
          :key="idnex"
          title="First"
          content="First step"
        >
          <template #default>
            <div>
              <div>
                <!-- 处理状态,0待认领，1送审中，2待审核，3已审核，4已签发，5已归档 -->
                <!-- 认领 -->
              </div>
              <div class="bgc">
                <div class="flex_box">
                  <div>状态：</div>
                  <div>
                    <span v-if="item.status == 0">待认领 </span>
                    <span v-if="item.status == 1">送审中 </span>
                    <span v-if="item.status == 2">待审核 </span>
                    <span v-if="item.status == 3">已审核 </span>
                    <span v-if="item.status == 4">已签发 </span>
                    <span v-if="item.status == 5">已归档 </span>
                    <span v-if="item.status == 6">送审中退回 </span>
                    <span v-if="item.status == 7">待审核返回</span>
                    <span v-if="item.status == 8">已审核退回</span>
                    <span v-if="item.status == 9">已签发退回</span>
                  </div>
                </div>
                <div class="flex_box">
                  <div>处理人：</div>
                  <div>{{item.person}}</div>
                </div>
                <div class="flex_box">
                  <div>完成时间：</div>
                  <div>{{item.processTime}}</div>
                </div>
                <!-- 检测公司 王先生已收样  -->
                <div class="filex_boxs">
                  <div class="box1">
                    <div>{{item.person}}</div>
                    <div>{{item.processTime}}</div>
                  </div>
                </div>
              </div>
            
              
            </div>
          </template>
        </lay-step-item>
      </lay-step>
    </div>
  </lay-layer>
</template>

<script lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";
import { layer } from "@layui/layer-vue";
import { GetCheckProcess } from "../../../../api/module/user";
export default {
  props: [],
  setup(props: any, event: any) {
    const active = ref(10);
    const visible = ref(false);

    const open = (item: any) => {
      console.log("claimTag", item);
      if (httpUrl.value.includes("/Checkmsg/GetCheckProcess")) {
        getTabInfo(item);
      }
    };
    let httpUrl: any = ref([]);
    onMounted(() => {
      let url: any = sessionStorage.getItem("httpUrl");
      httpUrl.value = JSON.parse(url);
    });

    const data = reactive({
      dataList: [] as any,
    });

    const getTabInfo = async (item?: any) => {
      const res = await GetCheckProcess({
        detectionId: item.detectionId,
      });
      if (res.code === 200) {
        data.dataList = res.data;
        visible.value = true;
      }
    };

    const loading = ref(true);
    return {
      open,
      visible,
      active,
      loading,
      ...toRefs(data),
    };
  },
};
</script>

<style scoped>
.lay-step .lay-step-item-content-active,
.lay-step .lay-step-item-content--success {
  border: 1px solid #168ce8 !important;
  color: #168ce8 !important;
}
</style>
<style lang="scss" scoped>
.layer_center .from_box {
  width: 100%;
  margin: 22px;
  margin-left: 180px;
  height: 100%;
}

.bgc {
  position: relative;
  width: 300px;
  background: #e9f6fe;
  margin-top: 8px;
  border-radius: 4px;
  padding: 8px 12px;

  .flex_box {
    display: flex;
    align-items: center;
  }
}

.filex_boxs { 
  position: absolute;
  left: -160px;
  top: -10px;
  text-align: center;
  .box1 {
    margin-top: 20px;
  }
}
</style>